<template>
<!-- 这是侧边导航菜单 -->
  <div id="navMenu">
    <div class="navMenu">
      <div @click="openMenu"><van-icon name="apps-o" /></div>
      <div class="popup">
        <van-popup
          v-model="show"
          closeable
          close-icon="cross"
          close-icon-position="top-right"
          position="top"
          :style="{ height: '100%' }"
        >
          <div class="list">
            <ul>
              <router-link to='/'><li @click="menuJump">Main</li></router-link>
              <router-link to='/project'><li @click="menuJump">Projects</li></router-link>
              <router-link to='/designerTeam'><li @click="menuJump">Team</li></router-link>
              <router-link to='/aboutUs'><li @click="menuJump">About Us</li></router-link>
            </ul>
            <div class="bottom_text">
              <p>优粤家是一个多元文化的设计团队。 促进建筑与城市的和谐发展。</p>
              <p>YouYueJia is a multicultural design team. Promote the harmonious development of architecture and the city.</p>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
    }
  },
  methods: {
    // 打开菜单
    openMenu() {
      this.show = true;
    },
    // 菜单跳转后关闭弹框
    menuJump() {
      this.show = false;
    }
  }
}
</script>

<style lang="less" scoped>
.navMenu {
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 99;
  .van-icon-apps-o {
    font-size: 28px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}
/deep/ .van-popup__close-icon {
  color: #333;
  font-size: 27px;
}
.van-popup {
  background: linear-gradient(to bottom,#fff,#ccc);
}
.list {
  margin-top: 90px;
  ul {
    li {
      height: 60px;
      line-height: 60px;
      font-size: 40px;
      text-indent: 40px;
      color: #333;
      font-weight: 700;
    }
    li:hover {
      background-color: #ccc;
    }
  }
  .bottom_text {
    margin-top: 90px;
    padding: 25px;
    font-size: 15px;
    line-height: 27px;
    color: #444;
  }
}
</style>